<template>
    <div class="content-container">
        <!-- 归档 -->
        <article-archive :menuList="menuList" @childEvent="handleChildEvent" />
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="total,prev,pager,next"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="menuList.length"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import ArticleArchive from "../components/ArticleArchive";
import { getMenuArticleList } from "../api/index";

export default {
    name: "menu-article",
    components: {
        ArticleArchive,
    },
    data() {
        return {
            menuId: "", // 菜单id
            menuList: [],
            pageSize: 15, // 页面大小，一页有15条数据
            currentPage: 1, // 当前页，默认第一页
        };
    },
    created() {
        this.menuId = this.$route.params.id;
        this.getMenuArticle(this.menuId);
    },
    methods: {
        handleChildEvent(menuId) {
            this.getMenuArticle(menuId);
        },
        // 获取当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getMenuArticle(this.menuId);
        },
        getMenuArticle(id) {
            getMenuArticleList(id)
                .then((res) => {
                    this.menuList = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>
<style lang="scss" scoped>
@use "../assets/css/menu-article.scss";
</style>
